{% extends 'common/base.html' %}

{% load staticfiles %}

{% block head_js  %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
        $(function () {
            // 修改商品数量的ajax请求
            function ajax_edit_num(obj) {
                goods_id = $(obj).parents('.cart_list_td').find('.col01 input').val();
                goods_amount = $(obj).parents('.cart_list_td').find('.num_show').val();

                flog = false;
                $.ajax({
                    'url':'{% url 'carts:edit_goods_num' %}',
                    'data':{'goods_id':goods_id, 'goods_amount':goods_amount},
                    'type':'get',
                    //是否为异步,
                    'async':false,
                    'success':function (data) {
                        if(data.ret !=0) flog = true
                    }
                });
                //更新统计信息
                if (flog) update_total_info();
            }


            {# 更新总统计信息 #}
            function update_total_info() {
                total_nums = 0;
                total_money = 0;
                {# 遍历每件商品 #}
                $('.cart_list_td').each(function () {
                    {# 判断每商品是否被选择,选择就统计价格 #}
                    if($(this).find('input:checkbox').prop('checked')) {
                        {# 获取每个商品个数#}
                        nums = parseInt($(this).find('.num_show').val());
                        {# 获取每个商品的总价#}
                        money = parseFloat($(this).find('.col07').html());
                        total_nums += nums;
                        total_money += money;
                    }
                });
                {# 更改总价格#}
                $('.settlements .col03').find('em').html(total_money.toFixed(2));
                {# 更改总数量#}
                $('.settlements .col03').find('b').html(total_nums);
            }


            {# 更新单个商品信息 #}
            function update_goods_info(obj) {
                {# 获取商品单价#}
                single_money = parseFloat(obj.parents('.cart_list_td').find('.col05').html());
                {# 获取商品数量#}
                single_nums = parseInt(obj.parents('.cart_list_td').find('.num_show').val());
                {# 计算商品总价格#}
                goods_money = single_money*single_nums;
                {# 更改每个商品的总价格#}
                obj.parents('.cart_list_td').find('.col07').html(goods_money.toFixed(2) + '元');

                ajax_edit_num(obj);

{#                //更新统计信息#}
{#                update_total_info();#}
            }


            $(function () {
                $('.add').click(function () {
                    {# 获取数量#}
                    single_num = parseInt($(this).parents('.cart_list_td').find('.num_show').val());
                    single_num++;
                    {# 更新商品数量#}
                    $(this).parents('.cart_list_td').find('.num_show').val(single_num);

                    {# 更新单个商品信息 #}
                    update_goods_info($(this));


                });
            });
            $(function () {
                $('.minus').click(function () {
                    {# 获取数量 #}
                    single_num = parseInt($(this).parents('.cart_list_td').find('.num_show').val());
                    single_num--;

                    if(single_num <= 0) single_num=1;
                    {# 更新商品数量 #}
                    $(this).parents('.cart_list_td').find('.num_show').val(single_num);

                    {# 更新单个商品信息 #}
                    update_goods_info($(this));
                })
            });
            {# 直接更改商品数量,更新单个商品信息 #}
            $(function () {
               $('.num_show').change(function () {
                   {# 更新单个商品信息 #}
                    update_goods_info($(this));
               })
            });
            {# 当勾选框改变了 #}
            $(function () {
                $('.cart_list_td').find('input:checkbox').change(function () {
                    update_total_info()
                })
            });

            {# 全选 #}
            $('.settlements input:checkbox').click(function () {
                {# 勾选全选 #}
                if($(this).prop('checked')) $('.cart_list_td input:checkbox').prop('checked', true);
                {# 未勾选全选 #}
                else $('.cart_list_td input:checkbox').prop('checked', false);
                {# 更新信息 #}
                update_total_info();
            });

            {# 删除按钮 #}
            $('.col08 a').click(function () {

                {# 确认删除商品 #}
                if(confirm('确定删除本件商品吗?'))
                    // 获取商品id
                    goods_id = $(this).parents('.cart_list_td').find('.col01 input').val();
                    flog = false;
                    $.ajax({
                        'url':'{% url 'carts:del_goods' %}',
                        'data':{'goods_id':goods_id},
                        'type':'get',
                        //是否为异步,
                        'async':false,
                        'success':function (data) {
                            if(data.ret !=0) flog = true
                        }
                    });
                    // 确认删除后
                    if (flog) {
                        // 删除商品js
                        $(this).parents('.cart_list_td').remove();
                        //更新统计信息
                        update_total_info();
                    }
            });

            // 结算按钮
            $('.settlements .col04 a').click(function () {
                // 默认没有商品被选中
                flog = true;
                // 遍历商品
                $('.cart_list_td input').each(function () {
                    // 判断商品是否选中
                    if($(this).prop('checked')){
                        // 提交表单
                        $('.order').submit();
                        // 当有商品被选中,则使flog为0
                        flog = false;
                        // 相当于break,跳出本次循环
                        return false
                    }

                });
                // 没有商品被选中则执行
                if(flog) alert('你还未选中商品');
            })



        });
    </script>

{% endblock head_js %}

{% block body %}

{% include 'common/status.html' %}


	<div class="search_bar clearfix">
        {% include 'common/logo.html' %}
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>

	<div class="total_count">全部商品<em>2</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>

    <form class="order" method="post" action="{% url 'order:order' %}">
    {% csrf_token %}
    {% for cart in carts %}
        <ul class="cart_list_td clearfix">
            <li class="col01"><input value="{{ cart.cart_goods.id }}" type="checkbox" name="goods_id" checked></li>
            <li class="col02"><img src="{% static cart.cart_goods.good_image %}"></li>
            <li class="col03">{{ cart.cart_goods.good_name }}<br><em>{{ cart.cart_goods.good_price }}元/{{ cart.cart_goods.good_unit }}</em></li>
            <li class="col04">{{ cart.cart_goods.good_unit }}</li>
            <li class="col05">{{ cart.cart_goods.good_price }}元</li>
            <li class="col06">
                <div class="num_add">
                    <a href="javascript:;" class="add fl">+</a>
                    <input type="text" class="num_show fl" value="{{ cart.cart_amount }}">
                    <a href="javascript:;" class="minus fl">-</a>
                </div>
            </li>
            <li class="col07">{{ cart.total_money }}元</li>
            <li class="col08"><a href="javascript:;">删除</a></li>
        </ul>
    {% endfor %}
    </form>

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{ carts.total_money }}</em><br>共计<b>{{ carts.total_num }}</b>件商品</li>
		<li class="col04"><a href=javascript:;>去结算</a></li>
	</ul>
{% endblock body %}

